

import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react'
import { ProList,Searchlist } from '../../axios'
import { InfiniteScroll, List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { ListItem } from 'antd-mobile/es/components/list/list-item';
export default forwardRef(function SearchList(props,ref) {
    let navigate = useNavigate()
    let [ data,setData ] = useState([])
    let [ page,setPage ] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const searchlist = (keyword) => {
        Searchlist({page:1,keyword}).then(res => {
            console.log(res);
            if(res.data.message === "抱歉，暂未找到相关的商品"){
                return
            }
            setData(res.data.data)
        })
    }
    useImperativeHandle(ref,()=>{
        return {
            searchlist
        }
    }) 
      async function loadMore() {
          setPage(page+1)
          const append = await Searchlist({page:page,keyword:props.keyword})
        //   console.log(append,999);
          if(append.data.message === "抱歉，暂未找到相关的商品"){
            // console.log(1111);
            setHasMore(false)
            return
          }
          setData(val => [...val, ...append.data.data])
          setHasMore(append.data.data.length > 0)
      }
    return (
      <div className='list'>
          <List>
              {
                  data.map((item,index)=>{
                      return <ListItem key={index} onClick={()=>navigate("/detail/"+item.proid)}>
                                  <img src={item.img1} />
                                  <p className='desc'>{item.desc.slice(5)}</p>
                                  <p className='price'>￥{item.originprice}</p>
                               </ListItem>
                  })
              }
          </List>
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    )
})
